<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Axios案例</title>
</head>
<body>
  <div id="app">
    <table border="1px" width="800px">
      <tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>电话</th><th>住址</th></tr>
      <tr v-for="stu in students">
        <td>{{stu.id}}</td>
        <td>{{stu.name}}</td>
        <td>{{stu.age}}</td>
        <td>{{stu.gender}}</td>
        <td>{{stu.cellphone}}</td>
        <td>{{stu.address}}</td>
      </tr>
    </table>
  </div>
  <script src="js/vue.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    new Vue({
      el: '#app',
      data:{
        students: []  //学生集合
      },
      methods:{
        //加载学生
        loadStudents(){
          //通过axios发送请求给后台，处理后台返回的响应数据 可以发送不同类型的请求get/post/delete/put
          //then用于处理响应数据
          axios.get("http://localhost:8080/findStudents")
                  .then(result => {
                    console.log(result.data)
                    if(result.data.code == 200){
                      //把后台的数据绑定到模型中
                      this.students = result.data.data;
                    }
                  })
        }
      },
      mounted() {
        //调用加载学生方法
        this.loadStudents()
      }
    })
  </script>
</body>
</html>